<template>
  <div class="header">
      <!-- 盒区生活头部 -->
    <div class="header-title">
        <p class="title">盒区生活</p>
        <div class="title-pic">
            <div id="head-por">
                <img src="/image/Life/header.jpg" alt="" @click="fun()">
                
            </div>
            
            <van-icon name="search" size=".22rem" class="ico-search"/>
            <van-icon name="chat-o" size=".22rem"/>
        </div>
    </div>
    
    <!-- 头部导航 -->
    <div class="header-nav">
        <router-link to="/life/advice">推荐</router-link>
        <router-link to="/life/follow">关注</router-link>
        <router-link to="/life/food">初夏开胃料理</router-link>
        <router-link to="/life/hotfood">小龙虾吃嗨了</router-link>

    </div>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.push("/headp")
        }
    }
}
</script>

<style scoped>
    .header{
        position: fixed;
        top: 0;
        width: 100%;
        height: 1rem;
        z-index: 99;
        background-color: white;
    }
    .header-title{
        width: 100%;
        height: .5rem;
        padding-top: .15rem;
        display: flex;
        justify-content: space-between;
    }
    .title{
        font-size: .18rem;
        font-weight: bold;
        /* line-height: .5rem; */
        margin-left: .125rem;
    }
    .title-pic{
        display: flex;
        align-items: center;
        margin-right: .125rem;
    }
    /* 头像 */
    #head-por{
        width: .23rem;
        height: .23rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .13rem;
    }
    #head-por>img{
        width: 100%;
        height: 100%;
    }
    /* 搜索 */
    .ico-search{
        margin-right: .15rem;
    }

    .header-nav{
        width: 100%;
        height: .5rem;
        display: flex;
        margin-left: .125rem;
        align-items: center;
    }
    .header-nav a{
        font-size: .12rem;
        color: black;
        font-weight: 600;
        font-family: "黑体";
        display: inline-block;
        height: .3rem;
        line-height: .3rem;
        padding: 0 .125rem;
        border-radius: .15rem;
    }
    .header-nav a.router-link-active{
        background-color: black;
        color: white;
        height: .3rem;
    }
</style>